import React from "react"
// import { observable } from "mobx-react";
import { observer,inject } from "mobx-react"
<<<<<<< HEAD
<<<<<<< HEAD
@inject("searchStore")
=======
=======
>>>>>>> 3ef2a7301991405f246e5687924fdd0e40607de4
import "../../assets/styles/seach.css"
import {Route,Link,Redirect} from "react-router-dom"
import Result from "./result"
import SingerResult from "./singerResult"
import SeachHot from "./seachHot"
@inject('searchStore')

<<<<<<< HEAD
>>>>>>> 3ef2a7301991405f246e5687924fdd0e40607de4
=======
>>>>>>> 3ef2a7301991405f246e5687924fdd0e40607de4
@observer
class Search extends React.Component{
    constructor(){
        super()
        this.state={
<<<<<<< HEAD
<<<<<<< HEAD
            count:this.props.searchStore
        }
    }
    render(){
        let {store}=this.props;
        console.log(store);
        return (
            <div>
                <h2>搜索</h2>
                <input type="text" />
            </div>
        ) 
    }
    ct(){
        console.log(this.state.count.count)
    }
=======
            value:"",
            arr:[],
            history:localStorage.getItem('search_history') ? localStorage.getItem('search_history').split(',') : []
            // history2: localStorage.getItem('seachHistory') ? localStorage.getItem('seachHistory').split(',') : []
        }
        this.clearHistory = this.clearHistory.bind(this);
        // this.clearAll = this.clearAll.bind(this);
    }
    componentDidMount(){
        const {searchStore}=this.props;
        searchStore.getresultList2();
        // let locallist=JSON.parse(localStorage.getItem("seachHistory"));
        // var newArr = [];
        // var obj={};
        // //比较数组内的属性，并将其添加为obj的对象
        // for (var i = 0, length = locallist.length; i < length; i++) {
        // if(!obj[locallist[i].value]){
        // newArr.push(locallist[i])
        // obj[locallist[i].value]=-1
        // }
        // }
        // this.lists=newArr;
        // const add=this.lists
        // console.log(newArr)
        // this.setState({add})
        // const searchValue = this.state.value
        // this.setHistory(searchValue)
    }
    clearHistory(text) {
        const historyArr = localStorage.getItem('search_history').split(',');
        const index = historyArr.indexOf(text);
        historyArr.splice(index, 1);
        localStorage.setItem('search_history', historyArr);
        this.setState({history: historyArr});
    }
    handle(e){
        this.setState({value: e.target.value});
        
    }
=======
            value:"",
            arr:[],
            history:localStorage.getItem('search_history') ? localStorage.getItem('search_history').split(',') : []
            // history2: localStorage.getItem('seachHistory') ? localStorage.getItem('seachHistory').split(',') : []
        }
        this.clearHistory = this.clearHistory.bind(this);
        // this.clearAll = this.clearAll.bind(this);
    }
    componentDidMount(){
        const {searchStore}=this.props;
        searchStore.getresultList2();
        // let locallist=JSON.parse(localStorage.getItem("seachHistory"));
        // var newArr = [];
        // var obj={};
        // //比较数组内的属性，并将其添加为obj的对象
        // for (var i = 0, length = locallist.length; i < length; i++) {
        // if(!obj[locallist[i].value]){
        // newArr.push(locallist[i])
        // obj[locallist[i].value]=-1
        // }
        // }
        // this.lists=newArr;
        // const add=this.lists
        // console.log(newArr)
        // this.setState({add})
        // const searchValue = this.state.value
        // this.setHistory(searchValue)
    }
    clearHistory(text) {
        const historyArr = localStorage.getItem('search_history').split(',');
        const index = historyArr.indexOf(text);
        historyArr.splice(index, 1);
        localStorage.setItem('search_history', historyArr);
        this.setState({history: historyArr});
    }
    handle(e){
        this.setState({value: e.target.value});
        
    }
>>>>>>> 3ef2a7301991405f246e5687924fdd0e40607de4
    handleSearch(){
            const {searchStore}=this.props
            const value=this.state.value
            searchStore.getresultList(value)
            const searchValue = this.state.value
            console.log(searchValue)
            if (searchValue !== '') {
                this.props.history.push({pathname: '/search/result', state: {searchValue: searchValue}});
                this.setHistory(searchValue);
            }else{
                alert('请输入值')
            } 
            
    }
    setHistory(data) {
        console.log(data)

         let history= this.state.history.push(data );
        const searchHistory = this.state.history;
        let newHistory = [];
        for (let i = 0; i < searchHistory.length; i++) {
            if (newHistory.indexOf(searchHistory[i]) === -1) {
                newHistory.push(searchHistory[i])
            }
        }
        // console.log(newHistory)
        localStorage.setItem('search_history', newHistory);
        // console.log(this.state.search_history)
    }
    
    clearAll() {
        localStorage.setItem('search_history', '');
        this.setState({history: []});
    }
    back(){
        window.history.back()
        // window.history.go(0)

    }
   render(){
    const {seachsongs}=this.props.searchStore
    this.arr={...seachsongs}
    const {singers}=this.props.searchStore
    
    // console.log(singers[0].id)
       return(
           <div className="header">
               
               <div className="contain">
                    <i className="icon-keyboard_arrow_left" onClick={this.back.bind(this) }></i>
                    <div className="input">
                    <span className="icon-search"></span>
                        <input type="text" onChange={this.handle.bind(this)} value={this.state.value} placeholder="请输入搜素的内容"/>
                    </div>
                    <span onClick={this.handleSearch.bind(this)} className="span1">搜索</span>
               </div>
               <Route path={'/search/result'} component={Result}></Route>
               <Route path={"/search/singerResult"} component={SingerResult}></Route>
               <Route path={"/search/seachhot"} component={SeachHot}></Route>
               <Redirect from="/" to="/search/seachhot"></Redirect>
               {/* <div className="gt">
                   <p className="seach-p">热门搜索</p>
                   
                  {
                    singers.map(({name})=>{
                          return(
                              <span className="as" onClick={this.seacher.bind(this)}>{name}</span>
                          )
                      })

                  }
               </div>
               <div className="searchTitle">
                 <span className="seach-pp">搜索历史</span>
                    <em className="em" onClick={this.clearAll.bind(this)}>清除历史</em>
                </div> */}
                {/* <div>
                    {
                        // console.log(this.lists)
                        // (this.lists || []).map(({value})=>{
                        //     return(
                        //        <div className="p">
                        //             <span className="we">{value}</span>
                        //             <em onClick={this.clearHistory.bind(this)}>&times;</em>
                        //        </div>
                        //     )
                        // })

                        this.state.search_history.length > 0 ? this.state.history.map((ele) => {
                            return (
                                <div className="p">
                                             <span className="we">{ele}</span>
                                             <em onClick={() => this.clearHistory(ele)}>&times;</em>
                                       </div>
                            )
                        }) : null
                    }
                </div>
               <ul>
                {
                    // console.log(this.arr.songs)
                   
                    //   (this.arr.songs || []).map(({name,id,ar})=>{
                       
                    //        return (
                    //            <li key={id}>
                    //                <span>{ar[0].name}</span>
                    //                &nbsp;&nbsp;&nbsp;
                    //                --
                    //                &nbsp;&nbsp;&nbsp;
                    //               <span>{name}</span>
                    //            </li>
                    //        )
                    //    })
                   }
                </ul> */}
               
           </div>
          
       )
   }
<<<<<<< HEAD
>>>>>>> 3ef2a7301991405f246e5687924fdd0e40607de4
=======
>>>>>>> 3ef2a7301991405f246e5687924fdd0e40607de4
}
export default Search